<template>
  <div class="login_container">
    <vue-particles
      color="#00ffff"
      :particleOpacity="1"
      :particlesNumber="100"
      shapeType="circle"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
      style="height:100%"
    >
    </vue-particles>
    <div class="welcome-page-center">
      <div class="welcome-page-content">
        <div class="welcome-page-title" style="margin-top: 0px"><img src="../assets/img/3-zilingnaiyouti-01f.png"/></div>
        <div style="margin-left: 230px;margin-right: 330px;width: 437px">
          <el-tabs align="center" v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane name="first">
              <span slot="label">
             <i class="el-icon-s-grid" style="margin:0 25px 0 25px">
                 <span style="padding-left: 8px;font-size: 15px">账号密码登录</span>
             </i>
         </span>
              <div id="login_form">
                <el-form label-position="right" label-width="80px" :model="ruleForm" :rules="rules">
                  <el-form-item prop="username" label="用 户 名" style="margin-top: 10px;margin-left: -10px;margin-right: 10px">
                    <el-input v-model.number="ruleForm.username" prefix-icon="el-icon-user-solid" type="text" placeholder="请输入登录用户名"></el-input>
                  </el-form-item>
                  <el-form-item prop="password" label=" 密 码 " style="margin-left: -10px;margin-right: 10px">
                    <el-input v-model.number="ruleForm.password" prefix-icon="el-icon-lock" type="password" placeholder="请输入登录密码"></el-input>
                  </el-form-item>
                    <el-link href="/securityCheck" style="margin-left: -100px;margin-bottom: 20px" type="primary">没有账号<i class="el-icon-circle-plus el-icon--right"></i></el-link>
                    <el-link style="margin-left: 100px;margin-bottom: 20px;margin-right: -150px" type="danger">忘记密码<i class="el-icon-question el-icon--right"></i></el-link>
                    <el-form-item>
                    <el-button @click="googleCheck()" type="primary" plain style="width: 120px;margin-right: 20px">登录</el-button>
                    <el-button @click="resetForm('ruleForm')" type="warning" plain style="width: 120px;margin-right: 20px">重置</el-button>
                  </el-form-item>
                    <el-form-item>
                        <p style="margin-left: -100px">第三方登录  <img style="margin-left: 50px" width="20px" src="@/assets/QQ.svg" alt=""><el-link @click="Prompt()">QQ</el-link>
                            <img style="margin-left: 20px" width="20px" src="@/assets/wechat.svg" ><el-link @click="Prompt()">微信</el-link>
                        </p>
                    </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane name="second">
              <span slot="label">
             <i class="el-icon-mobile-phone" style="margin:0 25px 0 25px">
                 <span style="padding-left: 8px;font-size: 15px">手机验证码登录</span>
             </i>
         </span>
                <el-form label-position="right" label-width="80px" :model="ruleForm" :rules="rules">
                    <el-form-item prop="phoneNumber" style="margin-top: 10px;margin-left: -10px;margin-right: 10px" label="手 机 号">
                        <el-input v-model.number="ruleForm.phoneNumber" prefix-icon="el-icon-mobile" placeholder="请输入登录手机号"></el-input>
                    </el-form-item>
                    <el-form-item prop="code" style="margin-top: 10px;margin-left: -10px;margin-right: 10px" label="验 证 码">
                        <el-input v-model.number="ruleForm.code" prefix-icon="el-icon-postcard" placeholder="请输入登录验证码">
                            <el-button id="sendButton" slot="append" icon="el-icon-s-promotion">发送验证码</el-button>
                        </el-input>
                    </el-form-item>
                    <el-link href="/securityCheck" style="margin-left: -100px;margin-bottom: 20px" type="primary">没有账号<i class="el-icon-circle-plus el-icon--right"></i></el-link>
                    <el-link style="margin-left: 100px;margin-bottom: 20px;margin-right: -150px" type="warning">手机换绑<i class="el-icon-question el-icon--right"></i></el-link>
                    <el-form-item>
                        <el-button type="danger" style="width: 200px;margin-left: -40px" @click="googleCheck()">登录</el-button>
                    </el-form-item>
                    <el-form-item>
                        <p style="margin-left: -100px">第三方登录  <img style="margin-left: 50px" width="20px" src="@/assets/QQ.svg" alt="" ><el-link @click="Prompt()">QQ</el-link>
                            <img style="margin-left: 20px" width="20px" src="@/assets/wechat.svg" alt=""><el-link @click="Prompt()">微信</el-link>
                        </p>
                    </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
        </div>

        <div>
          <el-dialog title="人机身份验证" :visible.sync="outerVisible" center>
            <center><Recaptcha></Recaptcha></center>
            <div style="color: #ff4d51;font-size: 15px;font-family: 'Franklin Gothic Book',serif" slot="footer" class="dialog-footer">
              为了防止恶意登录,保护若兮系统安全,拦截恶意攻击或其它恶意行为,<br>以及反爬虫脚本,若兮安全团队规定,登录任何若兮相关系统,首先必须进行人机身份验证,验证成功为人类之后才能进行登录!
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import Recaptcha from "../components/Recaptcha/index";
import Utils from '../assets/js/util.js'
export default {
  name: 'login',
	components: {Recaptcha},
	data () {
	  var checkAge = (rule, value, callback) => {
		  if (!value) {
			  return callback(new Error('手机号不能为空'));
		  }
		  setTimeout(() => {
			  if (!Number.isInteger(value)) {
				  callback(new Error('请输入纯数字'));
			  } else {
				  if (!/^1(3|4|5|6|7|8)\d{9}$/.test(value)) {
					  callback(new Error('手机号为11位纯数字'));
				  } else {
					  callback();
				  }
			  }
		  }, 1000);
	  }
	  var checkCode = (rule, value, callback) => {
		  if (!value) {
			  return callback(new Error('验证码不能为空'));
		  }
		  setTimeout(() => {
			  if (!Number.isInteger(value)) {
				  callback(new Error('请输入纯数字'));
			  } else {
				  if (!/^\d{6}$/.test(value)) {
					  callback(new Error('验证码为6位纯数字'));
				  } else {
					  callback();
				  }
			  }
		  }, 1000);
	  }
	  var checkUsername = (rule, value, callback) => {
		  if (!value) {
			  return callback(new Error('用户名不能为空'));
		  }
		  setTimeout(() => {
              if (value.length < 3 || value.length > 10) {
                  callback(new Error('非法用户名'));
              } else {
                  callback();
              }
		  }, 1000);
	  }
	  var checkPassword = (rule, value, callback) => {
		  if (!value) {
			  return callback(new Error('密码不能为空'));
		  }
		  setTimeout(() => {
			  if (/^\{6,16}$/.test(value)) {
				  callback(new Error('密码格式为6-16位英文字母、数字或下画线'));
			  } else {
				  callback();
			  }
		  }, 1000);
	  }
	  return {
          activeName: 'first',
			outerVisible: false,
		  ruleForm: {
			  phoneNumber: '',
              code: '',
              username: '',
              password:''
		  },
		  rules: {
			  phoneNumber: [
				  { validator: checkAge, trigger: 'blur' }
			  ],
              code: [
                  { validator: checkCode, trigger: 'blur' }
              ],
              username: [
                  { validator: checkUsername, trigger: 'blur' }
              ],
              password: [
                  { validator: checkPassword, trigger: 'blur' }
              ]
		  }
	  };
  },
	mounted () {
		var vm = this
		Utils.$on('verification', function (msg) {
			vm.outerVisible = false;
      vm.userLogin();
		})
	},
  methods: {
		Prompt() {
			this.$message({
				message: '功能正在努力上线中~~',
				type: 'primary',
				center: true
			})
    },
		phoneLogin () {

    },
    googleCheck(){
			this.outerVisible = true;
    },
		userLogin(){
			var vm = this
			vm.axios({
				method: 'POST',
				url: this.GLOBAL.baseURLUser+'user/login',
				data: { username: vm.ruleForm.username,
					password: vm.ruleForm.password}
			}).then(function(resp) {
				if (resp.data.status === 'ok') {
					vm.$message({
						message: resp.data.message,
						type: 'success',
						center: true
					})
					localStorage.setItem('accessToken',resp.data.accessToken);
					vm.$router.push({ name: 'home'})
				} else {
					vm.$message({
						message: resp.data.message,
						type: 'error',
						center: true
					})
				}
			})
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
	  resetForm(formName) {
		  this.$refs[formName].resetFields();
	  }
  }
}
</script>

<style scoped>
  #login_form{
    background-color: rgba(173, 167, 232, 0);
  }
  .login_container {
    background-image: linear-gradient(-180deg, #1a1454 0%, #0e81a5 100%);
    background-image: url("../assets/img/1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
  }
  .welcome-page-center {
    width: 70%;
    height: 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: -150px;
    bottom: 150px;
    margin: auto;
  }
  .welcome-page-title {
    font-size: 35px;
    padding-top: 10px;
    text-align: center;
    user-select:none;
    color: aliceblue;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }
  .welcome-page-content {
    background-color: rgba(218, 209, 232, 0.35);
    border-radius: 10px;
    box-shadow: 0 0 20px 0 #f0f8ff;
  }
  .nav-item-group {
    padding: 18px 0;
  }
  .nav-item-title {
    font-size: 22px;
    padding-left: 20px;
  }
  .nav-item {
    display: inline-block;
    min-width: 128px;
    padding: 5px 10px;
    text-align: center;
    background: transparent;
    border: 1px solid #FFF;
    color: #f0f8ff;
    text-shadow: 0 0 0;
    border-radius: 5px;
    margin: 10px 20px;
  }
  .nav-item:hover {
    cursor: pointer;
    animation: .5s ease-in-out 0s 1 normal both running pulsate-bck;
  }
  @-webkit-keyframes pulsate-bck {
    0%,to {
      -webkit-transform: scale(1);
      transform: scale(1)
    }
    50% {
      -webkit-transform: scale(.9);
      transform: scale(.9)
    }
  }
  @keyframes pulsate-bck {
    0%,to {
      -webkit-transform: scale(1);
      transform: scale(1)
    }
    50% {
      -webkit-transform: scale(.9);
      transform: scale(.9)
    }
  }
</style>
